<template>
  <Card style="width: 100%;" title="角色管理">
    <Form name="roleForm" ref="roleForm" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <Row>
        <Col :span="8">
          <FormItem name="resourceName" label="角色名称">
            <Input placeholder="请输入角色名称" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="resourceType" label="角色状态">
            <Select placeholder="角色状态" style="width: 100%">
              <Option label="正常" value="正常" />
              <Option label="禁用" value="禁用" />
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="5" :offset="19">
          <Button type="primary" style="margin-right: 10px" size="md"  @click="handleQuery"
            >查询</Button
          >
          <Button type="primary" style="margin-right: 10px" size="md"
            >重置</Button
          >
          <a href="#" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></a>
        </Col>
      </Row>
    </Form>
    <div style="width: 100%;height: 2px; background-color: #E9EBF0;margin: 20px 0"></div>
    <Button type="primary" style="margin-right: 10px;margin-bottom: 20px;" size="md" @click="addForm()"
            ><Icon name="add"/> 新增</Button
          >
    <Table
      :columns="columns3"
      :dataSource="roleList"
      :bordered="false"
      @change="handleTableChange"
      :pagination="{
        total: roleList.length,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSize,
        current,
      }"
    >
      <template #render="render">
        <div v-if="render.dataIndex == 'status'">
           <Switcher type="text" v-model="render.record.status"  @change="handleStatusChange(render.record)"/>
        </div>
        <div v-else-if="render.dataIndex == 'operation'&&render.record.roleKey!='admin'">
          <a href="#" @click="handClick(render.record.roleId)">编辑</a>
          <span>|</span>
          <a href="#" @click="deleteClick(render.record.roleId)">删除</a>
        </div>
      </template>
      <template #paginationTotal="props">
        <span>总共{{ props.total }} 条</span>
      </template>
    </Table>
  </Card>
</template>

<script>
import { Modal } from '@uni/vue';
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus } from "@/api/system/role";
import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";
export default {
  data() {
    return {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 12,
      },
      data: [],
      columns3: [
        { title: "序号", dataIndex: "roleId", key: "roleId" },
        { title: "角色名称", dataIndex: "roleName", key: "roleName" },
        {
          title: "描述",
          dataIndex: "remark",
          key: "remark",
        },
        { title: "权限字符", dataIndex: "roleKey", key: "roleKey" },
        { title: "状态", dataIndex: "status", key: "status" },
        { title: "创建时间", dataIndex: "createTime", key: "createTime" },
        { title: "操作", dataIndex: "operation", key: "operation" },
      ],
      current: 1,
      pageSize: 5,
      // 角色表格数据
      roleList: [],
      // 总条数
      total: 0,
       // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
       // 日期范围
      dateRange: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    
    addForm() {
        this.$router.push('roleAdd')
    },
    // 角色状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
        return changeRoleStatus(row.roleId, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    /** 查询按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询角色列表 */
    getList() {
      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.roleList = response.rows;
          this.total = response.total;
        }
      );
    },
    handleTableChange(p, filters) {
      const { current, pageSize } = p;
      this.current = current;
      this.pageSize = pageSize;
      console.log("===>>>>filters", p, filters);
    },
    onSearch(value, e) {
      console.log("value", value, e);
    },
    handClick(roleId){
      //  this.$router.push(`roleEdit/${roleId}`)
       this.$router.push({
         path: `roleEdit/${roleId}`
       })
    },
    /** 删除按钮操作 */
    deleteClick(roleIds) {
       Modal.confirm({
          title: '确认删除？',
          content: '是否确认删除角色编号为"' + roleIds + '"的数据项？',
          
          onOk: () => {
            delRole(roleIds).then(()=>{
              this.getList();
               Message.success({ text: "删除成功" });
           
          });
          },
          onCancel: () => {
            Modal.error({
            title: 'Error弹出窗',
            content: '删除失败',
            });
          },
        });
    },
  },
};
</script>


